<template>
	<view class="list">
		<view class="label" :class="[labelClass]">
			<view :class="[lableColor,'flex-h-c']">
				<text v-if="iconName" :class="['iconfont mr10', 'fs46',iconName,iconColor]"></text>
				<text>{{label}}</text>
			</view>
			<text v-if="isShowColon">：</text>
		</view>
		<view class="value" :class="hasRightIcon?'activeScale':''" @click="hasRightIcon?$emit('rightIconClick'):''">
			<text v-if="!isShowBtn" :class="[color]" >{{value}}</text>
			<button v-if="isShowBtn" class="small-btn bg-btn-blue" @click="$emit('show')" hover-class="hover-opacity">查看</button>
			<text v-if="hasRightIcon" @click="$emit('rightIconClick')" class="right-icon" :class="'iconfont iconfont-'+rightIconName" :style="{color: rightIconColor}"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props:{
			color:String,
			label: String,
			value: String,
			lableColor:String,
			iconName:String,
			iconColor:String,
			isShowColon:{
				type: Boolean,
				default: false
			},
			isShowBtn:{
				type: Boolean,
				default: false
			},
			labelClass:{
				type: String,
				default: "left"
			},
			isHighlight:{
				type: Boolean,
				default: false
			},
			hasRightIcon: { // 是否有右侧图标
				type: Boolean,
				default: false
			},
			rightIconName: { // 右侧图标名称
				type: String,
				default: ''
			},
			rightIconColor: { // 右侧图标颜色
				type: String,
				default: '#FF3E3E'
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.list {
		display: flex;
		justify-content: space-between;
		line-height: 70upx;
		align-items: center;
		.value {
			display: flex;
			align-items: center;
		}
		.label{
			color: $uni-color-grey;
			overflow: hidden;
			.iconfont {
				vertical-align: middle;
			}
		}
		.left {
			text-align: left;
		}
		.right{
			text-align: right;
		}
		.justify {
			text-align-last: justify;
		}
		.right-icon {
			display: inline-block;
			margin-left: $uni-spacing-4;
		}
	}
</style>
